<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CeMberuS - Styleguide</title>
        
        <!-- begin stylsheets -->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" media="all">
        <link type="text/css" rel="stylesheet" href="media/css/default.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/cemberus.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/layout.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/text.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/button.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/lists.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/forms.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/boxes.css" media="all" />
        
        <!-- syntaxhighlighting -->
        <script type="text/javascript" src="media/js/shCore.js"></script>
        <script type="text/javascript" src="media/js/shBrushJScript.js"></script>
        <link type="text/css" rel="stylesheet" href="media/css/shCoreDefault.css"/>
        <link type="text/css" rel="stylesheet" href="media/css/shThemeEclipse.css"/>
        <script type="text/javascript">SyntaxHighlighter.all();</script>
        
    </head>
    
    <body class="start">
        <div id="page">
            <div id="header">
                <div id="logo">
                    <h1><a href="./" title="CeMberuS Startseite Styleguide">CeMberuS - Styleguide</a></h1>
                </div>
                <div id="menu">
                    <ul id="navigation" class="js-nav clearfix">
                        <li><a href="./" title="CeMberuS Startseite" class="first">Startseite</a></li>
                        <li><a href="text.html" title="CeMberuS Textauszeichnung">Textauszeichnung</a></li>
                        <li><a href="button.html" title="CeMberuS Button Styles">Buttons</a></li>
                        <li><a href="boxes.html" title="CeMberuS Boxes Styles" class="last active">Boxes</a></li>
                    </ul>
                    <div id="search">
                        <form id="searchform" method="get" action="">
                            <fieldset>
                                <legend>CeMberuS Suchformular</legend>
                                <input id="searchinput" type="text" value="suchen..." />
                                <input id="searchbutton" type="button" value="" />
                                <div class="clear"> </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="clear"> </div>
                </div>
            </div>
            <div id="content-header"> </div>
            <div id="content">
                <div id="content-area">
                    <div id="breadcrumbs">
                        <p><a href="./" title="CemBeruS Styleguide">CeMberuS</a><span class="sep"></span>Textauszeichnung</p>
                    </div>
                    <div class="entry">
                        <h2>Boxes</h2>
                        <div class="one-third">
                            <h3>1. Warning Box</h3>
                            <div class="box warning">
                                <div class="content">
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                </div>
                            </div>
                        </div>
                        <div class="one-third">
                            <h3>2. Info Box</h3>
                            <div class="box info">
                                <div class="content">
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                </div>
                            </div>
                        </div>
                        <div class="one-third last">
                            <h3>3. Download Box</h3>
                            <div class="box download">
                                <div class="content">
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                </div>
                            </div>
                        </div>
                        <div class="clear"> </div>
                        <div class="one-third">
                            <h3>4. About Box</h3>
                            <div class="box about">
                                <div class="content">
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                </div>
                            </div>
                        </div>
                        <div class="one-third last">
                            <h3>5. Normal Box</h3>
                            <div class="box">
                                <div class="content">
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                </div>
                            </div>
                        </div>
                        <div class="clear"> </div>
                    </div>
                </div>
            </div>
            <div id="content-footer"> </div>
        </div>
    </body>
    
</html>

